<template>
  <section style="text-align: left">
    <el-dialog title="添加员工" :visible.sync="dialogFormVisible" @close="clear">
      <el-form :model="userForm" :rules="userFormRules" ref="UserDate">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
              <el-input v-model="userForm.username" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="真实姓名" :label-width="formLabelWidth" prop="realName">
              <el-input v-model="userForm.realName"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input v-model="userForm.password"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
              <el-input v-model="userForm.phone"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-radio-group v-model="checkGender" @change="handleChange">
                <el-radio v-for="gender in genders" :label="gender" :key="gender"> {{ gender }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
              <el-input v-model="userForm.email"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import {validateEmail, validateName, validatePhone} from "../../../../utils/validate";

export default {
  name: "AddUser",
  data() {
    return {
      // 性别
      checkGender: [],
      genders: ["男", "女"],
      // 弹框打开还是关闭
      dialogFormVisible: false,
      // 提交表单
      userForm: {
        username: '',
        realName: '',
        password: '',
        gender: '',
        phone: '',
        email: '',
        createBy: ''
      },
      formLabelWidth: '120px',
      // 表单验证
      userFormRules: {
        'username': {trigger: 'blur', validator: validateName, required: true},
        'realName': {trigger: 'blur', validator: validateName, required: true},
        'phone': {trigger: 'blur', required: true, validator: validatePhone},
        'email': {trigger: 'blur', required: true, validator: validateEmail}
      }
    }
  },
  methods: {
    // 性别选中返回值
    handleChange(value) {
      var temp
      for (let valueKey in value) {
        temp = value[valueKey]
      }
      if (temp === "男") {
        this.userForm.gender = 1
      }
      if (temp === "女") {
        this.userForm.gender = 2;
      }
    },
    submit() {
      this.$refs.UserDate.validate(async valid => {
        if (valid) {
          var _this = this;
          var createBy = _this.$store.state.username
          _this.userForm.createBy = createBy
          var data = _this.userForm
          _this.$axios.post('/register', data).then(resp => {
            if (resp.data.code === 200) {
              this.$message({
                message: '添加成功',
                type: "success"
              })
              this.clear()
              this.$emit('reload')
              this.dialogFormVisible = false
            } else {
              this.$alert(resp.data.message, '提示', {
                confirmButtonText: '确定'
              })
            }
          })
        }
      })
    },
    clear() {
      this.userForm = {
        username: '',
        realName: '',
        password: '',
        gender: '',
        phone: '',
        email: ''
      }
      this.checkGender = ''
      // 再次打开表单清除验证
      this.$refs.UserDate.resetFields();
      this.$refs.UserDate.clearValidate();
    }
  }
}
</script>

<style scoped>

</style>
